<template>
  <view class="zwds-box" v-if="loading">
    <view class="ziwei-pan" ref="result">
      <view class="gong-row">
        <view class="gong">
          <view class="position col nan-dong">
            <view>南</view>
            <view>偏</view>
            <view>东</view>
          </view>
          <view
            class="gong-item gong-item_5"
            @click="gongClick(5)"
            :class="selectedGongIndex == 5 ? 'active' : ''"
          >
            <gongwei
              gongIndex="5"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[5]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
        <view class="gong">
          <view class="position row zheng-nan">
            <view>正</view>
            <view>南</view>
            <view>方</view>
          </view>
          <view
            class="gong-item gong-item_6"
            @click="gongClick(6)"
            :class="selectedGongIndex == 6 ? 'active' : ''"
          >
            <gongwei
              gongIndex="6"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[6]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
        <view class="gong">
          <view class="position row nan-xi">
            <view>南</view>
            <view>偏</view>
            <view>西</view>
          </view>
          <view
            class="gong-item gong-item_7"
            @click="gongClick(7)"
            :class="selectedGongIndex == 7 ? 'active' : ''"
          >
            <gongwei
              gongIndex="7"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[7]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
        <view class="gong">
          <view class="position col xi-nan">
            <view>西</view>
            <view>偏</view>
            <view>南</view>
          </view>
          <view
            class="gong-item gong-item_8"
            @click="gongClick(8)"
            :class="selectedGongIndex == 8 ? 'active' : ''"
          >
            <gongwei
              gongIndex="8"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[8]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
      </view>
      <view class="gong-row">
        <view class="gong-col">
          <view class="gong-item gong-item_4">
            <view class="position col dong-nan">
              <view>东</view>
              <view>偏</view>
              <view>南</view>
            </view>
            <view
              class="gong-item-col"
              @click="gongClick(4)"
              :class="selectedGongIndex == 4 ? 'active' : ''"
            >
              <gongwei
                gongIndex="4"
                :liunianIndex="liunianIndex"
                :type="showType"
                :feixinggong="feiXinGong[4]"
                :daxian="selectedDaxian"
              ></gongwei>
            </view>
          </view>
          <view class="gong-item gong-item_3">
            <view class="position col zheng-dong">
              <view>正</view>
              <view>东</view>
              <view>方</view>
            </view>
            <view
              class="gong-item-col"
              @click="gongClick(3)"
              :class="selectedGongIndex == 3 ? 'active' : ''"
            >
              <gongwei
                gongIndex="3"
                :liunianIndex="liunianIndex"
                :type="showType"
                :feixinggong="feiXinGong[3]"
                :daxian="selectedDaxian"
              ></gongwei>
            </view>
          </view>
        </view>
        <view class="gong-center-box">
          <view class="gong-center">
            <view class="title">易朴文化</view>
            <view class="name-info">
              <view class="item-info">
                <view>姓名：</view>
                <view>{{ mingzao.userName }}</view>
              </view>
              <view class="item-info">
                <view class="item-info-sex">{{ mingzao.sexNameString }}</view>
                <view>{{ mingzao.wuXingJu }}</view>
              </view>
            </view>
            <view class="center-info"> 阳历：{{ mingzao.completeDateTime }} </view>
            <view class="center-info"> 农历：{{ mingzao.completeLunarDateTime }} </view>
            <view class="info-sizhu">
              <view class="info-sizhu-title">
                <view>四柱</view>
                <view>八字</view>
              </view>
              <view class="info-ganzhi-box">
                <view class="info-ganzhi">
                  <view>{{ mingzao.yearGanZhi[0] }}</view>
                  <view>{{ mingzao.monthGanZhi[0] }}</view>
                  <view>{{ mingzao.dayGanZhi[0] }}</view>
                  <view>{{ mingzao.hourGanZhi[0] }}</view>
                </view>
                <view class="info-ganzhi">
                  <view>{{ mingzao.yearGanZhi[1] }}</view>
                  <view>{{ mingzao.monthGanZhi[1] }}</view>
                  <view>{{ mingzao.dayGanZhi[1] }}</view>
                  <view>{{ mingzao.hourGanZhi[1] }}</view>
                </view>
              </view>
            </view>
            <view class="example">
              <view>自化图示：</view>
              <uni-icons type="arrow-right" size="10" color="#00BA7D"></uni-icons>
              <view class="sihua-lu">禄</view>
              <uni-icons type="arrow-right" size="10" color="#821883"></uni-icons>
              <view class="sihua-quan">权</view>
              <uni-icons type="arrow-right" size="10" color="#007CD4"></uni-icons>
              <view class="sihua-ke">科</view>
              <uni-icons type="arrow-right" size="10" color="#890202"></uni-icons>
              <view class="sihua-ji">忌</view>
            </view>
          </view>
          <view class="line">
            <minggongline :minggongInfo="minggongInfo"></minggongline>
          </view>
        </view>
        <view class="gong-col">
          <view class="gong-item gong-item_9">
            <view class="position col zheng-xi">
              <view>正</view>
              <view>西</view>
              <view>方</view>
            </view>
            <view
              class="gong-item-col"
              @click="gongClick(9)"
              :class="selectedGongIndex == 9 ? 'active' : ''"
            >
              <gongwei
                gongIndex="9"
                :liunianIndex="liunianIndex"
                :type="showType"
                :feixinggong="feiXinGong[9]"
                :daxian="selectedDaxian"
              ></gongwei>
            </view>
          </view>
          <view class="gong-item gong-item_10">
            <view class="position col xi-bei">
              <view>西</view>
              <view>偏</view>
              <view>北</view>
            </view>
            <view
              class="gong-item-col"
              @click="gongClick(10)"
              :class="selectedGongIndex == 10 ? 'active' : ''"
            >
              <gongwei
                gongIndex="10"
                :liunianIndex="liunianIndex"
                :type="showType"
                :feixinggong="feiXinGong[10]"
                :daxian="selectedDaxian"
              ></gongwei>
            </view>
          </view>
        </view>
      </view>
      <view class="gong-row">
        <view class="gong">
          <view class="position col dong-bei">
            <view>东</view>
            <view>偏</view>
            <view>北</view>
          </view>
          <view
            class="gong-item gong-item_2"
            @click="gongClick(2)"
            :class="selectedGongIndex == 2 ? 'active' : ''"
          >
            <gongwei
              gongIndex="2"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[2]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
        <view class="gong">
          <view class="position row bei-dong">
            <view>北</view>
            <view>偏</view>
            <view>东</view>
          </view>
          <view
            class="gong-item gong-item_1"
            @click="gongClick(1)"
            :class="selectedGongIndex == 1 ? 'active' : ''"
          >
            <gongwei
              gongIndex="1"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[1]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
        <view class="gong">
          <view class="position row zheng-bei">
            <view>正</view>
            <view>北</view>
            <view>方</view>
          </view>
          <view
            class="gong-item gong-item_0"
            @click="gongClick(0)"
            :class="selectedGongIndex == 0 ? 'active' : ''"
          >
            <gongwei
              gongIndex="0"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[0]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
        <view class="gong">
          <view class="position col bei-xi">
            <view>北</view>
            <view>偏</view>
            <view>西</view>
          </view>
          <view
            class="gong-item gong-item_11"
            @click="gongClick(11)"
            :class="selectedGongIndex == 11 ? 'active' : ''"
          >
            <gongwei
              gongIndex="11"
              :liunianIndex="liunianIndex"
              :type="showType"
              :feixinggong="feiXinGong[11]"
              :daxian="selectedDaxian"
            ></gongwei>
          </view>
        </view>
      </view>
    </view>
    <view class="opt-box">
      <view class="opt-btn" @click="preview">放大查看</view>
      <view class="opt-btn" @click="backZwds">修改个人信息</view>
    </view>
    <activity-box :positionId="502"></activity-box>
    <daxian ref="daxian" :result="daxianResult" @change="daxianChange"></daxian>
    <liunian ref="liunian" :result="liunianResult" @change="liunianChange"></liunian>
    <activity-box :positionId="503"></activity-box>
  </view>
</template>
<script>
import { getZiWeiDouShuApi, getZiHuaStarApi } from "@/http/api/zwds.js";
import html2canvas from "html2canvas";
import gongwei from "./components/gongwei.vue";
import daxian from "./components/daxian.vue";
import liunian from "./components/liunian.vue";
import minggongline from "./components/minggongline.vue";
export default {
  components: {
    gongwei,
    daxian,
    liunian,
    minggongline,
  },
  data() {
    return {
      loading: false,
      showType: "daxian",
      feiXinGong: {},
      daxian: {},
      selectedDaxian: {},
      mingzao: {},
      daxianResult: [],
      liunianResult: [],
      liunianIndex: undefined,
      minggongInfo: {
        minggongIndex: undefined,
        sanheIndex: undefined,
      },
      // 当前选中的宫
      selectedGongIndex: undefined,
    };
  },
  mounted() {
    uni.showLoading({
      mask: true,
      title: "加载中",
    });
    let query = this.$route.query;
    let { name, sex, area, year, month, day, hour, minute, isSolar } = query;
    getZiWeiDouShuApi({
      userName: name,
      birthDay: `${year}-${month}-${day} ${hour}:${minute}`,
      districtGeocode: area,
      sex: sex == "0" ? "男" : "女",
      solar: isSolar == "1",
    }).then((res) => {
      if (res.code == 200) {
        this.feiXinGong = res.data.feiXinGong;
        this.daxian = res.data.daxian;
        this.selectedDaxian = res.data.daxian[0];
        this.mingzao = res.data.mingZao;
        // 获取命宫位置
        let index = res.data.feiXinGong.findIndex((e) => e.isMinGong == true);
        this.minggongInfo = {
          minggongIndex: index % 6,
          sanheIndex: index % 4,
        };
        // 补全行个数
        let daxianTem = JSON.parse(JSON.stringify(res.data.daxian));
        let length = daxianTem.length;
        let remainder = 5 - (length % 5);
        for (let i = 0; i < remainder; i++) {
          daxianTem.push({
            yearRange: "-",
            ganzhi: ["", ""],
          });
        }
        this.daxianResult = daxianTem;
        this.liunianResult = res.data.daxian[0].ziWeiLiuNian;
        uni.hideLoading();
        this.loading = true;
      } else {
        uni.showToast({
          title: res.msg,
          icon: "none",
        });
      }
    });
  },
  methods: {
    gongClick(index) {
      this.selectedGongIndex = index;
      let temItem = this.daxian.find(
        (e) => e.ganzhi == this.feiXinGong[index].gongGanZhi
      );
      this.minggongInfo = {
        minggongIndex: index % 6,
        sanheIndex: index % 4,
      };
      getZiHuaStarApi({
        gan: temItem.ganzhi[0],
      }).then((res) => {
        if (res.code == 200) {
          let tem = JSON.parse(JSON.stringify(this.feiXinGong));
          for (let [ind, item] of tem.entries()) {
            for (let [i, ele] of item.starsList.entries()) {
              ele["clickSihua"] = "";
              for (let e of res.data) {
                if (ele.starName == e.starName) {
                  ele["clickSihua"] = e.siHuaXing;
                }
              }
            }
          }
          this.$set(this, "feiXinGong", tem);
        }
      });
    },
    preview() {
      uni.showLoading({
        title: "加载中",
        mask: true,
      });
      // loading框异步
      setTimeout(() => {
        html2canvas(this.$refs.result.$el, {
          scale: 2,
        }).then((canvas) => {
          let dataURL = canvas.toDataURL("image/png");
          uni.previewImage({
            urls: [dataURL],
          });
          uni.hideLoading();
        });
      }, 100);
    },
    backZwds() {
      uni.reLaunch({
        url: "/pages/paipan/paipan?type=4",
      });
    },
    daxianChange(index) {
      this.showType = "daxian";
      this.liunianIndex = undefined;
      this.selectedDaxian = this.daxian[index];
      let item = this.selectedDaxian.gongweiNames.find((e) =>
        Object.values(e).includes("命宫")
      );
      if (item) {
        let temIndex = this.feiXinGong.findIndex(
          (e) => e.gongDiZhi == Object.keys(item)[0]
        );
        this.minggongInfo = {
          minggongIndex: temIndex % 6,
          sanheIndex: temIndex % 4,
        };
      }
    },
    liunianChange(index) {
      this.liunianIndex = index;
      index == undefined ? (this.showType = "daxian") : (this.showType = "liunian");
      let item = this.selectedDaxian.ziWeiLiuNian[index].gongweiNames.find((e) =>
        Object.values(e).includes("命宫")
      );
      if (item) {
        let temIndex = this.feiXinGong.findIndex(
          (e) => e.gongDiZhi == Object.keys(item)[0]
        );
        this.minggongInfo = {
          minggongIndex: temIndex % 6,
          sanheIndex: temIndex % 4,
        };
      }
    },
    starStyle(lvl) {
      if (lvl == 1) return "color:#a820db";
      return "color:#363535";
    },
    gongName(item) {
      if (item.GongName == "命宫")
        return "color:#c51414;border-radius: 13rpx;border: solid 2rpx #c51414;";
    },
    change(item, index) {
      if (index == this.itemIndex) return;
      this.itemIndex = index;
      this.$emit("itemClick", {
        item,
        index,
      });
    },
    adTarget(item) {
      window.location.href = item.skipLinks;
    },
  },
};
</script>

<style lang="scss" scoped>
.active {
  background-color: #efeef3;
}
.zwds-box {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  overflow-x: hidden;
  .x-area {
    height: 165px;
    width: 200%;
    background-color: #d8d8d8;
    overflow: hidden;
  }
  .ziwei-pan {
    padding: 45rpx 0;
  }

  .gong-row {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;

    .gong-col {
      width: 23%;
      display: flex;
      flex-direction: column;
    }
    .gong-center-box {
      width: 46%;
      height: 360rpx;
      box-sizing: border-box;
      border: 2rpx solid #787878;
      position: relative;
      .line {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
      }
    }
    .gong-center {
      font-size: 26rpx;
      line-height: 36rpx;
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      padding: 22rpx;
      display: flex;
      flex-direction: column;
      .title {
        font-size: 28rpx;
        width: 100%;
        text-align: center;
        padding-bottom: 20rpx;
      }

      .name-info {
        width: 100%;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;

        .item-info {
          display: flex;
          flex-direction: row;
          align-items: center;
          font-size: 24rpx;
          transform: scale(0.8);
          transform-origin: left;

          .item-info-sex {
            padding-right: 8rpx;
          }
        }
      }

      .center-info {
        width: 100%;
        font-size: 24rpx;
        transform: scale(0.8);
        transform-origin: left;
        white-space: nowrap;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-start;
      }

      .info-sizhu {
        display: flex;
        flex-direction: row;
        justify-content: center;
        padding-top: 15rpx;

        .info-sizhu-title {
          display: flex;
          flex-direction: column;
          font-size: 24rpx;
          transform: scale(0.8);
          transform-origin: left;
          padding-right: 20rpx;
        }

        .info-ganzhi-box {
          display: flex;
          flex-direction: column;
          font-size: 24rpx;

          .info-ganzhi {
            display: flex;
            flex-direction: row;
            letter-spacing: 1em;
          }
        }
      }
      .example {
        display: flex;
        flex-direction: row;
        align-items: center;
        font-size: 24rpx;
        transform: scale(0.8);
        transform-origin: left;
        white-space: nowrap;
        padding-top: 25rpx;
        .sihua-lu {
          color: #00ba7d;
        }
        .sihua-quan {
          color: #821883;
        }
        .sihua-ke {
          color: #007cd4;
        }
        .sihua-ji {
          color: #890202;
        }
      }
    }

    .gong {
      width: 23%;
      // height: 180rpx;
      box-sizing: border-box;
      position: relative;
    }

    .gong-item {
      width: 100%;
      height: 180rpx;
      box-sizing: border-box;
      border: 2rpx solid #787878;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 2rpx;
      position: relative;
    }
    .gong-item-col {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
    }

    // 方位
    .position {
      position: absolute;
      font-size: 24rpx;
      line-height: 26rpx;
      transform: scale(0.8);
      transform-origin: left;
      display: flex;
      flex-direction: column;
    }

    .row {
      display: flex;
      flex-direction: row;
    }

    .col {
      display: flex;
      flex-direction: column;
    }

    .nan-dong {
      left: -26rpx;
      top: 10%;
    }

    .zheng-nan {
      top: -26rpx;
      left: 10%;
    }

    .nan-xi {
      top: -26rpx;
      right: 10%;
    }

    .xi-nan {
      right: -28rpx;
      top: 10%;
    }

    .dong-nan {
      left: -26rpx;
      top: 10%;
    }

    .zheng-dong {
      left: -26rpx;
      bottom: 10%;
    }

    .dong-bei {
      left: -26rpx;
      top: 10%;
    }

    .bei-dong {
      bottom: -26rpx;
      left: 10%;
    }

    .zheng-bei {
      bottom: -26rpx;
      right: 10%;
    }

    .bei-xi {
      right: -26rpx;
      top: 10%;
    }

    .xi-bei {
      right: -28rpx;
      bottom: 10%;
    }

    .zheng-xi {
      right: -28rpx;
      top: 10%;
    }
  }
}

.gong-item_1,
.gong-item_2,
.gong-item_3,
.gong-item_4,
.gong-item_5,
.gong-item_6 {
  border-right: none !important;
}

.gong-item_8,
.gong-item_9,
.gong-item_10,
.gong-item_11 {
  border-left: none !important;
}

.gong-center-box,
.gong-item_3,
.gong-item_4,
.gong-item_5,
.gong-item_6,
.gong-item_7,
.gong-item_8,
.gong-item_9,
.gong-item_10 {
  border-bottom: none !important;
}

.gong-top {
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .star {
    .star-item {
      display: flex;
      flex-direction: row;
      font-size: 20rpx;
      line-height: 24rpx;
      white-space: nowrap;

      .star-name {
        font-size: 20rpx;
        line-height: 24rpx;
      }

      .light-level {
        width: 20rpx;
        font-size: 20rpx;
        line-height: 24rpx;
        color: #681406;
        margin: 0 4rpx;
      }

      .sihua-xing {
        width: 20rpx;
        font-size: 20rpx;
        line-height: 24rpx;
        color: #d81e06;
        font-weight: bold;
      }
    }
  }

  .gongwei-box {
    display: flex;
    flex-direction: row;

    .shengong {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
      line-height: 26rpx;
      width: 26rpx;
      font-weight: bold;
      color: #c51414;
      border-radius: 13rpx;
      border: solid 2rpx #c51414;
    }

    .gongweiname {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 26rpx;
      line-height: 26rpx;
      width: 26rpx;
      font-weight: bold;
    }
  }
}

.gong-bottom {
  display: flex;
  flex-direction: column;
  align-items: flex-end;

  .daxian-section {
    font-size: 20rpx;
    line-height: 32rpx;
    color: #0869b4;
  }

  .ganzhi {
    font-size: 22rpx;
    line-height: 32rpx;
    color: #363535;
  }
}
.opt-box {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20rpx 30rpx;
  .opt-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 200rpx;
    padding: 15rpx 0;

    color: #fff;
    background-color: #c6a680;
  }
}
</style>
